<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<title>数据字典列表</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="shortcut icon" href="${ctx }/ico/favicon.ico">
<link href="${ctx }/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
<link href="${ctx }/css/font-awesome.css?v=4.4.0" rel="stylesheet">

<!-- jqgrid-->
<link href="${ctx }/css/plugins/jqgrid/ui.jqgrid.css?0820"
	rel="stylesheet">

<link href="${ctx }/css/animate.css" rel="stylesheet">
<link href="${ctx }/css/common.css" rel="stylesheet">
<link href="${ctx }/css/style.css?v=4.1.0" rel="stylesheet">
<!-- Sweet Alert -->
<link href="${ctx }/css/plugins/sweetalert/sweetalert.css"
	rel="stylesheet">
<link
	href="${ctx}/css/plugins/bootstrap-select/bootstrap-select.min.css"
	rel="stylesheet" />
<!-- bootstrap-switch css -->
<link href="${ctx }/css/plugins/bootstrap-switch/bootstrap-switch.css"
	rel="stylesheet">
<style type="text/css">
  .row-right{
    padding-left: 0;
  }
  .row-left{
    padding-right: 0;
  }
  .control-label{
    padding-right: 0;
  }
  .input-left{
    padding-right: 0;
  }
  .input-right{
    padding-left:0;
  }
  
@media (min-width: 768px){
.modal-dialog{
  width:700px;
}
}
</style>
</head>
<body class="gray-bg">
	<div class="animated fadeInRight">
		<div class="row">
			<div class="col-sm-12">
				<div class="ibox ">
					<div class="ibox-content">
						<div class="row m-b-sm m-t-sm">
							<div class="col-md-11">
								<div class="input-group">
									<button class="btn btn-success btn-outline commonbtn" type="button"
										id="addDict">
										<i class="fa fa-plus"></i> 添加
									</button>
									<button class="btn btn-success btn-outline commonbtn" type="button"
										id="editDict">
										<i class="fa fa-pencil"></i> 编辑
									</button>
									<button class="btn btn-success btn-outline commonbtn" type="button"
										id="delDict">
										<i class="fa fa-trash"></i> 删除
									</button>
								</div>
							</div>
						</div>
						<div class="jqGrid_wrapper">
							<table id="table_list"></table>
							<div id="pager_list"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>


	<!-- 添加菜单模态窗口 -->
	<div class="modal inmodal" id="addDictWin" tabindex="-1" role="dialog"
		aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content animated bounceInRight">
				<div class="modal-header">
					<button type="button" class="close closeWin" data-dismiss="modal">
						<span aria-hidden="true">&times;</span><span class="sr-only">关闭</span>
					</button>
					<h5 class="modal-title">数据字典配置</h5>
				</div>

				<div class="ibox-content">
					<form class="form-horizontal m-t" id="addDictForm">
                        <!-- 所属字典ID -->
                        <input type="hidden" id="pk_dict_id" name="pk_dict_id" value="${pk_dict_id}"/>
                        <!-- 场景ID -->
                        <input type="hidden" id="pk_scene_id" name="pk_scene_id" value="${pk_scene_id}"/>
                        
						<div class="form-group">
                          <div class="row">
                            <div class="col-sm-6 row-left">
    							<label class="col-sm-4 control-label">数据项名称：</label>
    							<div class="col-sm-8 input-left" >
                                    <select id="item_name" name="item_name" class="selectpicker" required="" aria-required="true">
                                      <option value="">--请选择--</option>
                                      <c:forEach items="${data_items}" var="item">
                                        <option value="${item.item_name}">${item.item_name}</option>
                                      </c:forEach>
                                    </select>
    							</div>
                             </div>
                             <div class="col-sm-6 row-right">
                                <label class="col-sm-4 control-label">起始系统：</label>
                                <div class="col-sm-8 input-right">
                                 <select class="selectpicker" required="" aria-required="true"
									name="initial_system" id="initial_system">
									<option value="">--请选择--</option>
									<c:forEach items="${dictlist}" var="dictInfo">
										<option value="${dictInfo.dictname}">${dictInfo.dictname}</option>
									</c:forEach>
								</select>
                                </div>
                             </div>
                          </div>
						</div>
					    
              
                        <div class="form-group">
                          <div class="row">
                            <div class="col-sm-6 row-left">
                              <label class="col-sm-4 control-label">目标系统：</label>
                              <div class="col-sm-8 input-left" >
                                  <select class="selectpicker" required="" aria-required="true"
									name="target_system" id="target_system">
									<option value="">--请选择--</option>
									<c:forEach items="${dictlist}" var="dictInfo">
										<option value="${dictInfo.dictname}">${dictInfo.dictname}</option>
									</c:forEach>
								</select>
                              </div>
                             </div>
                             <div class="col-sm-6 row-right">
                                <label class="col-sm-4 control-label">字段中文名称：</label>
                                <div class="col-sm-8 input-right">
                                  <input id="c_field" name="c_field" class="form-control"
                                    required="" aria-required="true" type="text">
                                </div>
                             </div>
                          </div>
                       </div>
                       
                       <div class="form-group">
                          <div class="row">
                            <div class="col-sm-6 row-left">
                              <label class="col-sm-4 control-label">起始字段名称：</label>
                              <div class="col-sm-8 input-left" >
                                <input id="initial_field" name="initial_field" class="form-control"
                                  required="" aria-required="true" type="text">
                              </div>
                             </div>
                             <div class="col-sm-6 row-right">
                                <label class="col-sm-4 control-label">目标字段名称：</label>
                                <div class="col-sm-8 input-right">
                                  <input id="targat_field" name="targat_field" class="form-control"
                                    required="" aria-required="true" type="text">
                                </div>
                             </div>
                          </div>
                       </div>
                       <div class="form-group">
                          <div class="row">
                            <div class="col-sm-6 row-left">
                              <label class="col-sm-4 control-label">起始字段转换：</label>
                              <div class="col-sm-8 input-left" >
                                <input id="initial_field_conversion" name="initial_field_conversion" class="form-control"
                                  type="text">
                              </div>
                             </div>
                             <div class="col-sm-6 row-right">
                                <label class="col-sm-4 control-label">目标字段转换：</label>
                                <div class="col-sm-8 input-right">
                                  <input id="target_field_conversion" name="target_field_conversion" class="form-control"
                                     type="text">
                                </div>
                             </div>
                          </div>
                       </div>
                       <div class="form-group">
                          <div class="row">
                            <div class="col-sm-6 row-left">
                              <label class="col-sm-4 control-label">起始规则：</label>
                              <div class="col-sm-8 input-left" >
                                <input id="initial_rule" name="initial_rule" class="form-control"
                                   type="text">
                              </div>
                             </div>
                             <div class="col-sm-6 row-right">
                                <label class="col-sm-4 control-label">目标规则：</label>
                                <div class="col-sm-8 input-right">
                                  <input id="target_rule" name="target_rule" class="form-control"
                                    type="text">
                                </div>
                             </div>
                          </div>
                       </div>
                       <div class="form-group">
                          <div class="row">
                            <div class="col-sm-6 row-left">
                              <label class="col-sm-4 control-label">错误描述：</label>
                              <div class="col-sm-8 input-left" >
                                <input id="error_description" name="error_description" class="form-control"
                                   type="text">
                              </div>
                             </div>
                          </div>
                       </div>
                       
                       <div class="form-group">
                        <div class="col-sm-8 col-sm-offset-4">
                          <button type="button" class="btn btn-white" data-dismiss="modal" style="margin-left: 50px;margin-right:15px;">关闭</button>
                          <button type="submit" class="btn btn-primary"
                            id="add_SysCode_submit">保存</button>
                        </div>
                      </div>
					</form>
				</div>

			</div>
		</div>
	</div>
	<!--end 添加代码模态窗口 -->


	<!-- 修改代码模态窗口 -->
	<div class="modal inmodal" id="editDictWin" role="dialog"
		aria-hidden="true">
		<iframe id="editDictFrame" width="100%" height="100%"
			frameborder="0"></iframe>
	</div>
	<!--end 修改菜单模态窗口 -->

	<!-- 全局js -->
	<script src="${ctx }/js/jquery.min.js?v=2.1.4"></script>
	<script src="${ctx }/js/bootstrap.min.js?v=3.3.6"></script>

	<!-- Peity -->
	<script src="${ctx }/js/plugins/peity/jquery.peity.min.js"></script>

	<!-- jqGrid -->
	<script src="${ctx }/js/plugins/jqgrid/i18n/grid.locale-cn.js?0820"></script>
	<script src="${ctx }/js/plugins/jqgrid/jquery.jqGrid.min.js?0820"></script>

	<!-- jQuery Validation plugin javascript-->
	<script src="${ctx }/js/plugins/validate/jquery.validate.min.js"></script>
	<script src="${ctx }/js/plugins/validate/messages_zh.min.js"></script>

	<!-- layer javascript -->
	<script src="${ctx }/js/plugins/layer/layer.min.js"></script>

	<!-- jQuery form-->
	<script src="${ctx }/js/jquery.form.js"></script>


	<!-- 自定义js -->
	<script src="${ctx }/js/content.js?v=1.0.0"></script>
	<!-- Sweet alert -->
	<script src="${ctx }/js/plugins/sweetalert/sweetalert.min.js"></script>
	<script
		src="${ctx}/js/plugins/bootstrap-select/bootstrap-select.min.js"></script>
	<!-- bootstrap-switch js -->
	<script src="${ctx }/js/plugins/bootstrap-switch/bootstrap-switch.js"></script>
	<script>
		$(document).ready(function() {
			$.jgrid.defaults.styleUI = 'Bootstrap';
			//绑定表格数据
			$("#table_list").jqGrid({
				url : "${ctx }/monit_dict/dictListPage?pk_scene_id=${pk_scene_id}&pk_dict_id=${pk_dict_id}",
				datatype : "json",
				//height : "calc(100% - 265px)",
				height : $(window).height()-270,
				autowidth : true,
				shrinkToFit : false,
				multiselect : true,
				rowList : [ 10, 20, 30 ],
				root : "rows",
				colNames : [ '主键ID','场景ID', '所属字典ID', '数据项ID','数据项名称', '起始系统' ,'目标系统','字段中文名称','起始字段名称','目标字段名称','起始字段转换','目标字段转换','起始规则','目标规则','错误描述'],
				colModel : [
					{name:'id',index:'id',hidden:true},
					{name:'pk_scene_id',index:'pk_scene_id',hidden:true},
					{name:'pk_dict_id',index:'pk_dict_id',hidden:true},
					{name:'pk_item_id',index:'pk_item_id',hidden:true},
					{name:'item_name',index:'item_name' ,width:100},
					{name:'initial_system',index:'initial_system' ,width:100},
					{name:'target_system',index:'target_system' ,width:100},
					{name:'c_field',index:'c_field' ,width:100},
					{name:'initial_field',index:'initial_field' ,width:100},
					{name:'targat_field',index:'targat_field' ,width:100},
					{name:'initial_field_conversion',index:'initial_field_conversion' ,width:100},
					{name:'target_field_conversion',index:'target_field_conversion' ,width:100},
					{name:'initial_rule',index:'initial_rule' ,width:100},
					{name:'target_rule',index:'target_rule' ,width:100},
					{name:'error_description',index:'error_description' ,width:100}
				  ],
				sortable : true,
				sortname : 'insert_time',
				sortorder : 'desc',
				pager : "#pager_list",
				caption : "数据字典列表",
				ondblClickRow:function(row){
					var frameSrc = "${ctx}/monit_dict/edit_dict?id="+ row+"&pk_scene_id=${pk_scene_id}&pk_dict_id=${pk_dict_id}";
					$("#editDictFrame").attr("src", frameSrc);
					$('#editDictWin').modal('show');
				},
				loadComplete: function(){
					scrollX();
				}
			});
		});
		$("#pager_list_center").css("width","50%")
		scrollX();
		// jqGrid 自动调整宽度
		$(window).bind('resize', function() {
			var width = $('.jqGrid_wrapper').width();
			$('#table_list').setGridWidth(width);
			
			$(window).unbind("onresize");  
			   var height = $(window).height();
			   $("#table_list").setGridHeight(height-270);  
			   $(window).bind("onresize", this);
			   
			   scrollX();
		});

		//绑定add表单提交事件,异步提交表单
		$('#addDictForm')
				.submit(
						function() {
							var fromUrl = "${ctx }/monit_dict/add_dict";
							$
									.ajax({
										type : "post",
										url : fromUrl,
										data : $('#addDictForm').serialize(),
										success : function(data) {
											if (data.errcode == "0") {
												layer.alert(
													data.errmsg,
													{
														icon : 1
													},
													function(index) {
														//刷新表格数据
														$("#table_list").trigger("reloadGrid");
														//清空表单数据
														$("#addDictForm :input")
																.not(":button, :submit, :reset,:hidden")
																.val("")
																.removeAttr("checked")
																.remove("selected");
														$("#item_name").selectpicker("refresh");
														$("#initial_system").selectpicker("refresh");
														$("#target_system").selectpicker("refresh");
														//关闭add窗口
														$('#addDictWin').modal('hide');
														//关闭提示框
														layer.close(index);
													});
											} else {
												layer.alert(data.errmsg, {
													icon : 2
												})
											}

										},
										error : function() {
											layer.alert('添加业务场景配置失败！', {
												icon : 2
											});
										}
									});
							return false;
						});

		//绑定修改按钮事件
		$('#addDict').click(function() {
			$('#addDictWin').modal('show');
		});

		//绑定修改按钮事件
		$('#editDict').click(
				function() {
					var selectedId = $("#table_list").jqGrid("getRowData",$("#table_list").jqGrid("getGridParam", "selarrrow")).id;
					if (selectedId == null || selectedId == "") {
						layer.alert('请选择一项！', {
							icon : 0
						});
						return;
					}
					var frameSrc = "${ctx}/monit_dict/edit_dict?id="+ selectedId+"&pk_scene_id=${pk_scene_id}&pk_dict_id=${pk_dict_id}";
					$("#editDictFrame").attr("src", frameSrc);
					$('#editDictWin').modal('show');
				});

		function editWinClose(flag) {
			if (flag == "0") {
				$("#table_list").trigger("reloadGrid");
			}
			//关闭edit窗口
			$("#editDictFrame")[0].contentWindow.document.write('');
			$("#editDictFrame")[0].contentWindow.close();
			$('#editDictWin').modal('hide');
		}

		//绑定删除事件
		$('#delDict').click(
				function() {
					var selectedIds = $("#table_list").jqGrid("getGridParam",
							"selarrrow");
					var v_id = "";
					for (var i = 0; i < selectedIds.length; i++) {

						v_id = $("#table_list").jqGrid("getRowData",
								selectedIds[i]);
					}

					if (selectedIds == "") {
						layer.alert('请选择一项！', {
							icon : 0
						});
						return;
					}
					swal({
						title : "您确定要删除这条信息吗",
						text : "删除后将无法恢复，请谨慎操作！",
						type : "warning",
						showCancelButton : true,
						confirmButtonColor : "#DD6B55",
						confirmButtonText : "删除",
						closeOnConfirm : false
					}, function() {
						$.ajax({
							type : "post",
							dataType : "json",
							url : "${ctx }/monit_dict/delete_by_id",
									
							data : "ids="+selectedIds,
							success : function(data) {
								if (data.errcode == "0") {
									//刷新表格数据
									$("#table_list").trigger("reloadGrid");
									swal("删除成功！", "您已经永久删除了这条信息。", "success");
								} else {
									swal("删除数据字典失败！", "您未删除这条信息。", "error");
								}
							},
							error : function() {
								swal("删除数据字典失败！", "您未删除这条信息。", "error");
							}
						});
					});
				});
		

		//监控开关
		$('#share_switch_div input').bootstrapSwitch({
			onText : "ON",
			offText : "OFF",
			onColor : "primary",
			offColor : "danger",
			size : "small",
			state : false,
			onInit : function(event, state) {//初始化开关
				$("#scene_status").val("0");
			},
			onSwitchChange : function(event, state) {//开关状态发生改变时
				if (state == true) {
					$("#scene_status").val("1");
				} else {
					$("#scene_status").val("0");
				}
			}
		});
		
		//表格横向滚动条
		function scrollX(){
			$(".ui-jqgrid-bdiv").css("width","100%")
			$(".ui-jqgrid-bdiv").css("overflow-x","scroll");
			$("#pager_list").css("width","100%");
			$("#gbox_table_list").css("width","100%");
			$("#gview_table_list").css("width","100%");
			$(".table-responsive").css("overflow-x","hidden");
		}
		
	</script>
</body>
</html>